<template>
  <div class="project-notebook">
    <div>
      <div class="header-editor-box header">
        <div class="header-right">
          <span class="header-right-edit" v-if="!editNotes" @click="doEditNotes"><i class="el-icon-edit-outline"></i><span class="">编辑</span></span>
          <span class="header-right-save" v-if="editNotes">
            <!-- <i class="icon-save" /><span @click="doSaveNotes">保存</span>
            <i class="icon-cancle" /><span @click="doCancleNotes">取消</span> -->
            <el-button class="icon-cancle" @click="doCancleNotes">取消</el-button>
            <el-button class="icon-save" type="primary" @click="doSaveNotes">保存</el-button>
          </span>
        </div>
      </div>
      <div class="note-content">
        <div class="hascon-editNotes" v-if="!editNotes && notebookData !== ''">
          <viewer
            :value="notebookViewerData"
            height="500px"
          />
        </div>
        <div v-if="!editNotes && notebookData === ''" class="no-data nocon-editNotes">暂无笔记，您可以点击编辑添加项目笔记</div>
        <!-- <vue-editor v-show="editNotes" class="editor-box" v-model="notebookData"></vue-editor> -->
        <editor
          v-show="editNotes"
          ref="tuiEditor"
          v-model="notebookData"
          :options="editorOptions"
          previewStyle="vertical"
          height="500px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import { Editor, Viewer } from '@toast-ui/vue-editor'

import { getProjectNotes, editProjectNotes } from '../../api/project'
import { mapGetters } from 'vuex'

export default {
  components: {
    'editor': Editor,
    'viewer': Viewer
  },
  data () {
    return {
      notebookData: '',
      notebookViewerData: '',
      editNotes: false,
      editorOptions: {
        hideModeSwitch: true
      }
    }
  },
  methods: {
    // 编辑
    doEditNotes () {
      this.editNotes = true
      this.$nextTick(() => {
        this.$refs.tuiEditor.invoke('setValue', this.notebookData)
        this.$refs.tuiEditor.invoke('scrollTop', 1)
      })
    },
    // 保存
    doSaveNotes () {
      if (this.notebookData.length > 20000) {
        this.$message({ message: '笔记不超过20000个字符长度', showClose: true, type: 'warning' })
        return false
      }
      this.editNotes = false
      this._editProjectNotes()
    },
    // 取消编辑
    doCancleNotes () {
      this.editNotes = false
      this.notebookData = this.notebookViewerData
    },
    // 查询项目笔记
    _getProjectNotes () {
      let query = `?projectId=${this.curProject.id}`
      getProjectNotes(query).then(res => {
        if (res.message.code === 0) {
          this.notebookData = res.data.notes
          this.notebookViewerData = res.data.notes
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 编辑项目笔记
    _editProjectNotes () {
      let data = {}
      data.id = this.curProject.id
      data.notes = this.notebookData
      editProjectNotes(data).then(res => {
        if (res.message.code === 0) {
          this._getProjectNotes()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  mounted () {
    this._getProjectNotes()
  },
  computed: {
    ...mapGetters([
      'curProject'
    ])
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/header_editor_box"
.project-notebook
  background #fff
  border-radius 5px
  .no-data
    display flex
    align-items center
    justify-content center
    background #fff
    padding 96px 0 98px
    color #6E6E6E
    font-size 14px
    line-height 24px
  .note-content
    .editor-box
      height 350px
  .te-preview
    background #ffffff
</style>
